<template>
	<view class="" :style="{'overflow':isShowPopup?'hidden':'visible'}">
		<view class="massage-nav-bar" v-if="!isshow" :style="{'background-color':backColor}">
			<view class="back" @click="back">
				<image :src="$util.imgurl('imgs/massage/back.png')" mode=""></image>
			</view>
			<view class="title">
				{{detailData.title}}
			</view>
			<view class="right-icon">
				<image :src="$util.imgurl('imgs/massage/share.png')" @click.stop="share" mode=""></image>
				<image style="margin-left: 30rpx;" @click.stop="isShowMenu = !isShowMenu"
					:src="$util.imgurl('imgs/massage/xuan.png')" mode=""></image>
			</view>
		</view>
		<view class="all-nav-bar" id="allNav" v-if="isshow">
			<view class="back" @click="back">
				<image :src="$util.imgurl('imgs/massage/left.png')" mode=""></image>
			</view>
			<view class="menu-list">
				<view class="item-menu" v-for="(item,index) in menu" :key="index" @click="changeSwiper(item)">
					<view :class="current == item.id?'selectmenu':''">{{item.name}}</view>
					<view v-if="current == item.id" class="lines"></view>
				</view>
			</view>
			<view @click="isShowMenu = !isShowMenu" class="right-icon" style="display: flex;align-items: center;">
				<image style="width: 31rpx;height: 31rpx;" @click.stop="share" :src="$util.imgurl('imgs/massage/share-s.png')" mode="">
				</image>
				<image style="margin-left: 30rpx;width: 33rpx;height: 25rpx;"
					:src="$util.imgurl('imgs/massage/shai-s.png')" mode=""></image>
			</view>
		</view>
		<view v-show="current == 0">
			<view class="massage-img-top">
				<image :src="detailData && detailData.top_images?detailData.top_images[0]:''"  mode="aspectFill"></image>
			</view>
			<view class="service-content">
				<view class="massage-program ">
					<view class="massage-program-title-lines">
						<view class="left-title-icon-bg">
							{{detailData.title}}
							
						</view>
						<image style="width: 34rpx;height: 34rpx;" class="right-icon" v-if="detailData.is_collect == 0"
							:src="$util.imgurl('/imgs/massage/satrt.png')" @click="collect(id,2)" mode="">
						</image>
						<image style="width: 34rpx;height: 34rpx;" class="right-icon"  v-else  @click="collect(id,2)" src="https://qiniu-cdn.maeiyun.com/imgs/massage/s-start.png" mode=""></image>
					</view>
					<view class="box-content">
						<scroll-view scroll-x class="type-of-service">
							<view class="block flex">
								<view @click="chooseServiceSpe(item)"
									:class="massageSpe.id == item.id?'item-server item-server-select':'item-server'"
									v-for="(item,index) in detailData.spec" :key="index">
									<view class="title">{{item.name}}</view>
									<view class="price">{{item.price}} <text>元/次</text></view>
								</view>
							</view>
						</scroll-view>
						<view class="vip-hint">
							<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/v1.png" mode=""></image>券后约{{massageSpe.reduction_price}}元/次
						</view>
						<view class="time">
							<image :src="$util.imgurl('/imgs/massage/naozhong.png')" mode=""></image>
							<view>{{massageSpe.time}}分钟</view>
						</view>
					</view>
				</view>
				<view class="massage-program ">
					<view class="massage-program-title-lines">
						<view class="left-title-icon-bg">
							可选技师
						</view>
						<view style="margin-right: 29rpx;" v-if="selectiveTechnician" @click="toSearch">全部</view>
					</view>
					<view class="box-content">
						<view style="text-align: center;color: #999;" v-if="!selectiveTechnician">暂无技师</view>
						<scroll-view scroll-x  show-scrollbar @scrolltoupper="technicianLoading" @scrolltolower="technicianLoading">
							<view class="technician-search-recommend-list">
								<view
									:class="selectiveTechnician.id == items.id?'item-technician selcct-item-technician':'item-technician' "
									v-for="(items,indexs) in technicianList" :key="indexs"
									@click.prevent="chooseTechnician(items,indexs)">
									<view class="shoosestyle" v-if="selectiveTechnician.id == items.id">
									</view>
									<image @click.stop="showPopup(items,indexs)" class="look-img"
										src="../../static/jishi/big.png" mode=""></image>
									<image :src="items.work_clothes_image" mode="aspectFill"></image>
									<view class="bottom-text">{{items.technician_nickname || items.real_name}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="massage-program " style="padding: 0;" v-if="selectiveTechnician">
					<view class="massage-program-title-lines">
							<view class="left-title-icon-bg-88" style="height: 88rpx;">
								可选时间
							</view>
						<view class="tims-lines" @click="chooseTime" v-if="showtime">
							<view class="fastest-time"> {{optimal.time}}</view>
							<view class="fastest-time-box">最快</view>
							<view class="lines"></view>
							<view class="recommend-time">{{day==0 ? '今天' : '明天'}} {{optimal.time}}</view>
							<view class="recommend-time-box">推荐</view>
							<uni-icons type="right" color="#959597" size="12"></uni-icons>
						</view>
						<view class="tims-lines" @click="chooseTime" v-else>
							<view class="recommend-time">{{selectiveTime.alldate}} {{selectiveTime.week}} {{selectiveTime.time}}</view>
							<uni-icons type="right" color="#959597" size="12"></uni-icons>
						</view>
					</view>
				</view>
				<view class="explain" @click="isIdentification=true">
					<image :src="bannerDate2[0]&&bannerDate2[0].image" mode=""></image>
				</view>
				<view class="massage-program" style="border-radius: 20rpx;padding-bottom: 50rpx;">
					<view class="server-title">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/te.png" mode=""></image>服务时长: {{massageSpe.time}}分钟
					</view>
					<view :class="iszhan?'servive-text expanded':'servive-text'">
						<view style="width: 100%;height: 100%;">
							<roc-text :content="detailData.profile"></roc-text>
						</view>
						<view class="more-btn" @click="toggleContent">
							{{iszhan ? '收起' : '展开全部'}}
						</view>
					</view>
				</view>
				<view class="massage-program box-content" style="margin-top: 58rpx;">
					<view class="order-instructions">
						<view class="left-title">订购须知</view>
						<view class="right-hint" @click="toagremment">取消、退款、赔付规则 <uni-icons type="right" color="#E84843"
								size="12"></uni-icons></view>
					</view>
					<view class="order-instructions-message">
						<view class="" v-html="agremment"></view>
					</view>
					<view class="protocol-lines">点击预约即表示您知晓并同意<navigator url="/otherpages/agreement/userAgreement">《服务协议》</navigator></view>
				</view>
			</view>
		</view>

		<view v-if="current == 1" >
			<view class="u-parse-content" :style="{paddingTop: paddTop}" v-if="detailData.content">
				<rich-text :nodes="detailData.content | contentString"></rich-text>
			</view>
		</view>
		<view :style="{paddingTop: paddTop}" v-show="current == 2">
			<!-- 评论列表 -->
			<mescroll-body height="500px" top="0" bottom="0" @init="mescrollInit" :down="down" @down="downCallback" @up="upCallback">
				<commentList :list="commentlists"></commentList>
			</mescroll-body>
		</view>
		<view class="book-now" v-if="selectiveTechnician && technicianList.length>0 && !flag">
			<button  :class="selectiveTechnician && technicianList.length>0 ?'book-now-btn':'book-now-btn no-style'" @click="bookNow">立即预约</button>
		</view>
		
		<uni-popup ref="technicianPopup">
			<view class="technician-popupontent">
				<view class="technician-popup-list">
						<view class="item-popup-technician">
							<view class="swiper-item-img">
								<image :src="itemtechnician.work_clothes_image" mode="aspectFill"></image>
							</view>
							<view class="qualification-list">
								<view class="qualification-item">
									<image :src="$util.imgurl('/imgs/massage/vip-icoc.png')" mode=""></image>
									<view>实名认证</view>
								</view>
								<view class="qualification-item">
									<image :src="$util.imgurl('/imgs/massage/vip-icoc.png')" mode=""></image>
									<view>按摩师证</view>
								</view>
								<view class="qualification-item">
									<image :src="$util.imgurl('/imgs/massage/vip-icoc.png')" mode=""></image>
									<view>头像验真</view>
								</view>
								<view class="look-detail" @click="viewQualification(itemtechnician.id)">
									查看
									<uni-icons type="right" color="#6E4E37" size="14"></uni-icons>
								</view>
							</view>
							<view class="technician-popup-info">
								<view class="technician-info-lines">
									<view class="name">{{itemtechnician.technician_nickname || itemtechnician.real_name}}</view>
									<view class="age">{{itemtechnician.age}}</view>
									<view @click="openPopup(itemtechnician)" class="shop-lines" style="display: flex;align-items: center;font-size: 24rpx;margin-left: 20rpx;">
										<uni-icons custom-prefix="iconfont" type="icon-dianpu1" color="#333" size="12"></uni-icons>
										<view style="margin-left: 10rpx;">{{itemtechnician.store_name}}</view>
										<uni-icons type="forward" color="#333" size="12"></uni-icons>
									</view>
									<view class="right-address">
										<image :src="$util.imgurl('/imgs/massage/address.png')" mode=""></image>
										<view>{{(itemtechnician.juli/1000).toFixed(2)}}km</view>
									</view>
								</view>
								<view class="technician-datum-list-content">
									<view class="technician-datum-list">
										<view class="item-datum">
											<view class="titles">籍贯</view>
											<view class="desc">{{itemtechnician.city}}</view>
										</view>
										<view class="item-datum">
											<view class="titles">星座</view>
											<view class="desc">{{itemtechnician.constellation}}</view>
										</view>
										<view class="item-datum">
											<view class="titles">性别</view>
											<view class="desc">{{itemtechnician.gender == 1?'男':'女'}}</view>
										</view>
										<view class="item-datum">
											<view class="titles">民族</view>
											<view class="desc">{{itemtechnician.nation}}</view>
										</view>
										<view class="item-datum">
											<view class="titles">工龄</view>
											<view class="desc">{{itemtechnician.experience}}年</view>
										</view>
										<view class="item-datum">
											<view class="titles">手法</view>
											<view class="desc">{{itemtechnician.star}}星</view>
										</view>
										<view class="item-datum">
											<view class="titles">身高</view>
											<view class="desc">{{itemtechnician.height}}cm</view>
										</view>
										<view class="item-datum">
											<view class="titles">体重</view>
											<view class="desc">{{itemtechnician.weight}}kg</view>
										</view>
									</view>
									<view class="brief-introduction">
										正规绿色服务!擅长中式推拿、精油SPA、美容理疗，有
										按摩师证，手法专业，期待您的关注和预约~
									</view>
								</view>
								<view class="bottom-lines">
									<view>评论 {{itemtechnician.opinion}}</view>
									<view style="margin-left: 20rpx;">好评 {{((itemtechnician.high_opinion/itemtechnician.opinion || 0)*100).toFixed(0)}}%</view>
									<view class="btns">
										<image v-if="itemtechnician.is_collect == 0" @click="collect(itemtechnician.id,1,itemtechnician)"
											src="https://qiniu-cdn.maeiyun.com/imgs/massage/attion.png" mode="widthFix"></image>
										<image v-else @click="collect(itemtechnician.id,1,itemtechnician)"
											src="https://qiniu-cdn.maeiyun.com/imgs/massage/select-attion.png" mode="widthFix">
										</image>
										<image @click="choosePopupTen(itemtechnician)"
											style="margin-left: 10rpx;"
											src="https://qiniu-cdn.maeiyun.com/imgs/massage/choose.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
					</view> 
				</view>
			</view>
		</uni-popup>
		<shaixuanPopup @massageResult="massageResult" ref="shaixuanPopup"></shaixuanPopup>
		<view class="hint-popup" v-show="isShowMenu">
			<view class="top-fixed"></view>
			<view class="menu-list">
				<view class="item-menu" @click="toIndex">
					<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/m1.png" mode=""></image>
					<view>首页</view>
				</view>
				<view class="item-menu" @click="toLink('/otherpages/search/search')">
					<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/m2.png" mode=""></image>
					<view>搜索</view>
				</view>
				<view class="item-menu" style="border: 0;" @click="toLink('/otherpages/attention/attentionserver')">
					<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/m3.png" mode=""></image>
					<view>我的关注</view>
				</view>
			</view>
		</view>
		<store ref="popup"></store>
		<u-popup v-model="isIdentification" mode="bottom" border-radius="20" safe-area-inset-bottom>
				<view class="top-bg-content">
					严控标准·全场保障
					<image @click="isIdentification = false" src="https://qiniu-cdn.maeiyun.com/imgs/index/c1.png" mode=""></image>
				</view>
				<scroll-view scroll-y class="inner-popup-content">
					<roc-text :content="bannerDate2[0] && bannerDate2[0].content"></roc-text>
				</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import publicData from './public.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import store from '@/components/store/store.vue'
	import { mapState } from 'vuex'//引入mapState
	export default {
		mixins: [MescrollMixin],
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		components:{
			store
		},
		data() {
			return {
				isShowMenu: false,
				isvertical: false,
				detailData: {},
				isIdentification:false,
				menu: [{
						'name': '服务',
						"id": 0
					},
					{
						'name': '详情',
						"id": 1
					},
					{
						'name': '评价',
						"id": 2
					},
				],
				current: 0, //菜单切换
				backColor: 'rgba(255, 255, 255, 0)',
				isshow: false,
				itemtechnician: {},
				technicianList: [], //技师列表
				technicianDetail: {}, // 技师详情
				timsData: [], // 预约时间
				instructions: {},
				screening: {}, //技师筛选条件
				orderparameter: { //预订单提交初始化参数
					day: 0,
					service_id: 0,
					service_spec_id: 0,
					num: 1,
					address_id: 0,
					technician_id: 0,
					user_ticket_id: "",
					time: 0,
					img: "",
					title: "",
					service_spec_price: 0,
				},
				serviceTime: "", //服务时间
				// serviceStaff: {}, //选择的服务人员信息
				id: 0, //服务id
				showtime: true,
				optimal: "", //最快 时间 最优 
				// primaryTechnician: {}, //预选技师
				selectiveTechnician: {}, //全局已选择的技师
				preselectedTime: {},
				selectiveTime: {}, //全局已选择的时间
				massageSpe: {},
				iszhan: false, //展开收起标识
				lat: "",
				lng: "",
				date: "",
				day: 0,
				page: 1,
				indexS: 0,
				commentlists: [],
				paddTop:0,
				down:{
					auto:false
				},
				agremment:"",
				isShowPopup:false,
				shareData:{},
				//
				value1:true,
				x:0,
				y:0,
				data1:[
					{
						title:'首页',
						icon:'https://qiniu-cdn.maeiyun.com/imgs/massage/m1.png',
						disabled:true
					},
					{
						title:'搜索',
						icon:'https://qiniu-cdn.maeiyun.com/imgs/massage/m2.png',
						disabled:true
					},{
						title:'我的关注',
						icon:'https://qiniu-cdn.maeiyun.com/imgs/massage/m3.png',
						disabled:true
					},
				],
				tid:0,
				bannerDate2:{},
				isLoad:true,
				
				flag:true,

			}
		},
		filters:{
			contentString(value) {
				return value.replace(/\<img/gi, '<img class="rich-img" ')
			}
		},
		onBackPress(option) {
			if(this.isShowPopup){
				this.$refs.technicianPopup.close()
				this.isShowPopup = false
				return true
			}else{
				return false
			}
			
		},
		onPageScroll(res) {
			// this.paddTop = 0
			//获取距离顶部距离
			const scrollTop = res.scrollTop;
			if (scrollTop >= 0 && this.current == 0) {
				// 导航条颜色透明渐变
				this.isshow = false
				if (scrollTop >= 100) {
					this.backColor = 'rgba(255, 255, 255, 0)'
					this.isshow = true
				}
			}
		},
		onLoad(option) {
			publicData.selectiveTechnician = {}
			publicData.selectiveTime = {}
			publicData.selectiveTiket = {}
			this.id = option.id
			this.tid = option.tid?option.tid:0
			// this.getLocation()
			this.getDetail(option.id)
			// this.orderInstructions()
			this.getShare()
			this.getAggrement()
			this.getBanner(8).then(data => {
				this.bannerDate2 = data
			})
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			if(publicData.selectiveTechnician.id){
				// this.page = 1
				// this.technicianList = []
				this.getTechnician(0,1)
			}
			setTimeout(() => {
				uni.hideLoading();
			}, 1000)
		},
		methods: {
			async getBanner(location) {
				var urlData = {}
				var that = this
				await this.request.httpTokenRequest({
					url: "index/getBanner",
					method: "get"
				}, {
					location: location
				}).then(function(res) {
					if (res.code == 0) {
						urlData = res.data
					} else {}
				})
				return urlData
			},
			openPopup(e){
				this.$refs.popup.open(e.store_id)
			},
			viewQualification(id) { //查看资质
				uni.navigateTo({
					url: '/otherpages/massage/realnameAuth?id='+id
				})
			},
			share(){
				var obj = {}
				if(this.shareData.open_type == 0 || this.shareData.open_type == 1){
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: this.shareData.path+ '?pid=' + uni.getStorageSync('user').id,
						title: this.shareData.title,
						summary:this.shareData.content,
						imageUrl: this.shareData.image,
						success: function (res) {
							// console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							// console.log("fail:" + JSON.stringify(err));
						}
					});
				}else if(this.shareData.open_type == 5){
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: this.shareData.open_type,
						title: this.shareData.title,
						imageUrl: this.shareData.image,
						miniProgram: {
							id: this.shareData.appid,
							path: this.shareData.path+ '?pid=' + uni.getStorageSync('user').id,
							type: 0,
							webUrl: this.shareData.path+ '?pid=' + uni.getStorageSync('user').id
						},
						success: function (res) {
						},
						fail: function (err) {
							// console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				
			},
			stopTouchMove() {
				return false
			},
			toIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			toLink(url) {
				if(url == '/pages/index/index'){
					uni.switchTab({
						url: url
					})
				}else {
					uni.navigateTo({
						url: url
					})
				}
			},
			showShaixuan() { //弹出筛选弹框
				this.$refs.shaixuanPopup.open()
			},
			showPopup(item, index) { //查看技师
				this.indexS = index
				this.itemtechnician = item
				this.isShowPopup = true
				this.$refs.technicianPopup.open('center')
			},
			technicianLoading(res){
				if(res.detail.direction == 'right'){
					this.getTechnician(3)
				}
			},
			chooseTechnician(item, index) { //选择技师
				this.selectiveTechnician = item
				// this.serviceTime = item.time
				
				// this.getTimes()
			},
			toSearch() { // 跳转选择全部技师
				uni.navigateTo({
					url: '/otherpages/search/searchDetail?id=' + this.id
				})
			},
			massageResult(data) { //接收 筛选弹窗返回值
				this.screening = data
				this.getTechnician(0)
			},
			getTimes() {
				let time = new Date()
				let hour = time.getHours()
				let min = time.getMinutes()
				if(hour >= 23 && min>=30){
					this.day = 1
				}
				if(!this.selectiveTechnician){
					return
				}
				var that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianWorkTime",
					method: "get"
				}, {
					technician_id: this.selectiveTechnician.id,
					day: this.day
				}).then(function(data) {
					if (data.code == 0) {
						if(data.data.length){
							let status = false
							for (let i = 0; i < data.data.length; i++) {
							    if (data.data[i].status === true) { // 这里的 condition 为某种特定条件
									status = true
									that.optimal = data.data[i]
									let datas = {
										day: that.day,
										time: data.data[i].time,
										week: that.day == 0 ? '今天' : '明天'
									}
									that.preselectedTime = datas
									that.selectiveTime = datas
									publicData.selectiveTime = datas
							        break; // 如果满足条件则跳出循环
							    }
							}
							if(!status){
								that.getDayNext(that.day+1)
							}else {
								// 判断是否请求完时间
								// 防抖
								that.flag = false
							}
							
						}else {
							that.getDayNext(that.day+1)
						}
					} 
				})
			},
			
			// 二次获取时间
			getDayNext(e){
				var that = this
				that.day = e
				this.request.httpTokenRequest({
					url: "service/getTechnicianWorkTime",
					method: "get"
				}, {
					technician_id: this.selectiveTechnician.id,
					day: that.day
				}).then(function(data) {
					if (data.code == 0) {
						if(data.data.length){
							for (let i = 0; i < data.data.length; i++) {
							    if (data.data[i].status === true) { // 这里的 condition 为某种特定条件
									that.optimal = data.data[i]
									let datas = {
										day: that.day,
										time: data.data[i].time,
										week: that.day == 0 ? '今天' : that.day == 1 ? '明天' : '后天'
									}
									that.preselectedTime = datas
									that.selectiveTime = datas
									publicData.selectiveTime = datas
							        break; // 如果满足条件则跳出循环
							    }
							}
							// 判断是否请求完时间
							// 防抖
							that.flag = false
						}else {
							that.getDayNext(e+1)
						}
					} 
				})
			},
			
			changeSwiper(item) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#allNav').boundingClientRect(data => {
				  this.paddTop = (data.height.toFixed(2)+10) +'px'
				  this.current = item.id
				  if(this.current == 1 || this.current == 2){
				  	this.isshow = true
				  	uni.pageScrollTo({
				  		scrollTop: 0
				  	});
				  }else{
				  	uni.pageScrollTo({
				  		scrollTop: 0
				  	});
				  	this.isshow = false
				  }
				}).exec();
				
				
			},
			back() {
				uni.navigateBack()
			},
			toggleContent() {
				this.iszhan = !this.iszhan
			},
			getShare(){
				var that = this
				this.request.httpTokenRequest({
					url: "index/getShareConfig",
					method: "get"
				}, {
					type:2
				}).then(function(data) {
					if(data.code == 0){
						that.shareData = data.data
					}
				})
			},
			getDetail(id) {
				var that = this
				this.request.httpTokenRequest({
					url: "service/read",
					method: "get"
				}, {
					id: id
				}).then(function(data) {
					if (data.code == 0) {
						that.detailData = data.data
						var a1 = data.data.content.replace("<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n", '');
						var aa = a1.replace("</body>\n</html>", '');
						that.detailData.content = aa
						that.serviceTime = data.data.spec[0].time
						that.massageSpe = data.data.spec[0]
						getApp().globalData.massageOrderInfo = that.massageSpe
					} else {

					}
				})
			},
			chooseServiceSpe(item) { // 选择服务项目
				this.massageSpe = item
				getApp().globalData.massageOrderInfo = item
			},
			getLocation() {
				var that = this
				uni.getStorage({
					key: 'location',
					success: function (res) {
						that.lat = res.data.lat
						that.lng = res.data.lng
						that.getTechnician(1) // 首次加载
					}
				});
			},
			getTechnician(type) { //获取技师列表
				var that = this
				//type == 1 首次加载
				//type == 0 onshow 加载
				//type == 3 触底加载 加载
				if(type == 0){
					this.page = 1
					that.technicianList = []
				}else if(type == 1){
					this.page = 1
					that.technicianList = []
				}else if(type == 3){
					if(!this.isLoad){
						return
					}
				}
				this.request.httpTokenRequest({
					url: "service/getTechnicianByService",
					method: "get"
				}, {
					service_id: this.id,
					technician_id: this.selectiveTechnician.id ? this.selectiveTechnician.id : this.tid,
					day: this.day,
					time: this.date,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
					page: this.page
				}).then(function(data) {
					if (data.code == 0) {
						if (type == 1) {
							that.technicianList = data.data.data
							that.selectiveTechnician = that.technicianList[0]
							publicData.selectiveTechnician = that.technicianList[0]
							that.getTimes()
							that.page = 0
						}else if(type == 0){
							that.technicianList = data.data.data
							that.selectiveTechnician = that.technicianList[0]
							publicData.selectiveTechnician = that.technicianList[0]
							if(publicData.selectiveTime.time){
								that.selectiveTime = publicData.selectiveTime
							}else{
								that.getTimes()
							}
						}else if(type ==3){
							that.technicianList = [...that.technicianList,...data.data.data]
							
						}
						if(that.technicianList.length >= data.data.total){
							that.isLoad = false
						}else{
							that.isLoad = true
							that.page++
						}
					} else {


					}
				})
			},
			getTechnicianDetail(id) {
				var that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianInfo",
					method: "get"
				}, {
					technician_id: id,

				}).then(function(data) {
					if (data.code == 0) {
						that.technicianDetail = data.data
					} else {

					}
				})
			},
			choosePopupTen(item) { //弹窗选择技师
				this.selectiveTechnician = item
				this.isShowPopup = false
				this.$refs.technicianPopup.close()
				this.getTechnician(1)

			},
			getAggrement(){
				var that = this
				this.request.httpTokenRequest({
					url: "/index/policy",
					method: "get"
				}, {
					type:'order_notice'
				}).then(function(data) {
					if (data.code == 0) {
						that.agremment = data.data.content
						// that.$util.msg(data.msg)
					} else {
				
					}
				})
			},
			collect(id, type, item) { //技师、服务收藏
				var that = this
				// var id =""
				// if(type == 1){
				// 	id = this.selectiveTechnician.id
				// }else{
					// id = this.id
				// }
				this.request.httpTokenRequest({
					url: "service/collect",
					method: "POST"
				}, {
					id: id,
					type: type, //1=技师，2=服务
				}).then(function(data) {
					if (data.code == 0) {
						if (type == 2) {
							that.$set(that.detailData, 'is_collect', that.detailData.is_collect == 1 ? 0 : 1)
						}
						if (type == 1) {
							that.itemtechnician.is_collect = (that.itemtechnician.is_collect == 1 ? 0 : 1)
							
						}
						that.$util.msg(data.msg)
					} else {

					}
				})
			},
			chooseTime() {
				uni.navigateTo({
					url: '/otherpages/massage/time?id=' + this.id + '&technician_id=' + this.selectiveTechnician.id
				})
			},
			closeT() {
				this.isShowPopup = false
				this.$refs.technicianPopup.close()
			},
			bookNow() {
				if(!this.selectiveTechnician && !this.technicianList){
				
					return
				}
				// this.$refs.serverorder.show()
				publicData.selectiveTechnician = this.selectiveTechnician
				publicData.selectiveTime = this.selectiveTime
				uni.navigateTo({
					url: "/otherpages/massage/serverOrder?id=" + this.id
				})
			},
			changetechnician() {
				this.$refs.changetechnician.show()
			},
			toagremment() {
				uni.navigateTo({
					url: '/otherpages/agreement/cancelOrder'
				})
			},
			orderInstructions() { //订购须知
				var that = this
				this.request.httpTokenRequest({
					url: "/index/policy",
					method: "get"
				}, {
					type: 'order_notice',
				}).then(function(data) {
					if (data.code == 0) {
						that.instructions = data.data
					} else {

					}
				})
			},
			downCallback() {
				this.commentlists = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getServiceAssess",
					method: "get"
				}, {
					id: this.id,
					page: page.num
				}).then(res => {
					if (res.code == 0) {
						that.commentlists = [...that.commentlists, ...res.data.data]
						that.mescroll.endSuccess(that.commentlists.length,that.commentlists.length == res.data.total?false:true)
					} else {
						// that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
		}

	}
</script>

<style lang="scss">
	@font-face {
		font-family: CustomFont;
		src: url('@/static/font/iconfont.ttf');
	}

	.all-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background-color: #fff;
		padding: 0 30rpx;
		padding-top: var(--status-bar-height);
		// height: 90rpx;
		// box-sizing: border-box;
		.back {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.menu-list {
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 82rpx;

			.item-menu {
				line-height: 76rpx;
				text-align: center;
			}

			.selectmenu {
				color: #EF5233;
			}

			.lines {
				width: 64rpx;
				height: 6rpx;
				background: #EF5233;
				border-radius: 6rpx;
			}
		}
	}

	//
	.massage-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: rgba(0, 0, 0, 0);
		z-index: 99;
		position: fixed;
		top: var(--status-bar-height);
		right: 0;
		left: 0;
		padding: 0 30rpx;

		.title {
			color: #fff;
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			z-index: 10;
		}

		.right-icon {
			display: flex;
			align-items: center;
			z-index: 10;
		}
	}

	.massage-img-top {
		height: 724rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.service-content {
		margin-top: -60rpx;
		background-color: #F5F7F8;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx;
		z-index: 10;
		position: relative;
		padding-bottom: 120rpx;
	}
	.explain{
		margin-bottom: 20rpx;
		
		image {
			width: 100%;
			height: 71rpx;
		}
	}
	.massage-program {
		background-color: #fff;
		position: relative;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding-bottom: 30rpx;

	}

	.massage-program-title-lines {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-title-icon {
			width: 229rpx;
			height: 60rpx;
		}
		.left-title-icon-bg{
			background: url('https://qiniu-cdn.maeiyun.com/imgs/index/titl-bg.png')no-repeat;
			background-size: 100% 100%;
			min-width: 229rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: right;
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			padding-right: 11rpx;
			box-sizing: border-box;
		}
		.left-title-icon-bg-88{
			background: url('https://qiniu-cdn.maeiyun.com/imgs/index/title-bg-2.png')no-repeat;
			background-size: 100% 100%;
			min-width: 229rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: right;
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			padding-right: 11rpx;
			box-sizing: border-box;
		}
		.right-icon {
			width: 29rpx;
			height: 28rpx;
			margin-right: 29rpx;
			display: flex;
			align-items: center;
		}
		view {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #8B8B8D;
		}
		.tims-lines {
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			.fastest-time-box {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8B8B8D;
				border-radius: 4rpx;
				border: 1rpx solid #DBDADA;
				padding: 0 4rpx;
				margin-left: 8rpx;
			}

			.lines {
				width: 1rpx;
				height: 25rpx;
				background-color: #E8E8E8;
				margin: 0 10rpx;
			}

			.recommend-time {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #EC473E;
			}

			.recommend-time-box {
				font-size: 20rpx;
				background-color: #EC473E;
				border-radius: 4rpx;
				color: #fff;
				margin-left: 8rpx;
				padding: 0 4rpx;
			}
		}
	}
	//
	.server-title{
		height: 90rpx;
		background: #FEFAF9;
		line-height: 90rpx;
		padding: 0 29rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		image{
			width: 27rpx;
			height: 26rpx;
			margin-right: 13rpx;
		}
	}
	//
	.servive-text {
		font-size: 26rpx;
		font-weight: 400;
		color: #6C6C6C;
		line-height: 40rpx;
		padding: 30rpx 32rpx;
		transition: height 1s ease-in-out;
		overflow: hidden;
		height: 300rpx;
		.more-btn {
			width: 240rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 35rpx;
			border: 1rpx solid #D1D1D1;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: center;
			line-height: 60rpx;
			position: absolute;
			bottom: -30rpx;
			left: 50%;
			transform: translate(-50%, 0%);

		}
	}

	.expanded {
		height: auto !important;
		transition: height 1s ease-in-out;
	}
	//
	.type-of-service {
		white-space: nowrap;
		margin-top: 30rpx;
		.item-server {
			// display: inline-block;
			width: 275rpx;
			// height: 151rpx;
			border: 1rpx solid #DDDBD8;
			flex: 0 0 auto;
			margin-right: 20rpx;
			border-radius: 20rpx;
			padding: 28rpx 26rpx;
			box-sizing: border-box;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/type-1.png') 0 0 no-repeat;
			background-size: 100% 100%;
			.title {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				white-space: break-spaces;
			}

			.price {
				display: flex;
				align-items: baseline;
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #EF5233;
				margin-top: 10rpx;
				text {
					font-size: 18rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 6rpx;
				}
			}
		}
		.item-server-select {
			border: 1rpx solid #EF5233;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/type-0.png')no-repeat;
			background-size: 100% 100%;
			.title {
				color: #EF5233;
				font-weight: bold;
			}
		}
	}
	//
	.vip-hint {
		background: #EDF1FA;
		width: fit-content;
		height: 40rpx;
		font-size: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #3A335F;
		text-align: right;
		padding-right: 16rpx;
		line-height: 40rpx;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		border-radius: 6rpx;
		margin-left: 10rpx;
		image{
			width: 89rpx;
			height: 40rpx;
			margin-right: 8rpx;
			margin-left: -10rpx;
		}
	}

	//
	.time {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;

		image {
			width: 19rpx;
			height: 18rpx;
			margin-right: 9rpx;
		}
	}

	//
	.technician-search-recommend-list {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		.more {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #858587;
			line-height: 28rpx;
			text-align: center;

			image {
				width: 21rpx;
				height: 20rpx;
				margin-top: 18rpx;
			}
		}

		.item-technician {
			flex: 0 0 auto;
			width: 176rpx;
			height: 220rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			margin-right: 14rpx;

			image {
				width: 176rpx;
				height: 220rpx;
			}

			.look-img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				z-index: 100;
				right: 8rpx;
				top: 8rpx;
			}

			.bottom-text {
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				font-size: 20rpx;
				background: rgba(0, 0, 0, .6);
				color: #fff;
				text-align: center;
			}
		}
		
		.selcct-item-technician {
			position: relative;
			box-sizing: border-box;
			width: 176rpx;
			height: 220rpx;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/bg-b.png')no-repeat;
			background-size: 100% 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			.shoosestyle {
				position: absolute;
				box-sizing: border-box;
				width: 176rpx;
				height: 220rpx;
				background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/bg-b.png')no-repeat;
				background-size: 100% 100%;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 100;
			}

		}

	}

	//
	.order-instructions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0 0 0;

		.left-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}

		.right-hint {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #E84843;
		}
	}

	.order-instructions-message {
		font-size: $uni-font-size-base;
		font-weight: 400;
		color: #945C17;
		line-height: 47rpx;
		padding: 22rpx 0;
	}

	.protocol-lines {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #242526;
		display: flex;
		align-items: center;
		navigator {
			color: #E84843;
		}
	}

	//滑动查看详情
	.look-detail {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #945C17;

		image {
			width: 15rpx;
			height: 18rpx;
			margin-right: 9rpx;
		}
	}

	//
	.book-now {
		height: 120rpx;
		background: #FEFFFF;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		padding-top: 16rpx;
		box-sizing: border-box;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		.shop-lines{
			text-align: center;
			font-size: $uni-font-size-base;
			color: #333333;
		}
		.book-now-btn {
			width: 680rpx;
			height: 88rpx;
			background: #EF5233;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		.no-style{
			background-color: #D1D1D1;
		}
	}

	//弹窗样式
	.technician-popupontent {
		width: 690rpx;
		border-radius: 10rpx;
		.icon-lines {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgba(0, 0, 0, 0);
			margin-bottom: 30rpx;

			.back-icon {
				width: 13rpx;
				height: 13rpx;
			}

			.shaixuna-icon {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				width: 128rpx;
				height: 50rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 25rpx;
				justify-content: center;

				image {
					width: 22rpx;
					height: 24rpx;
				}
			}
		}

		//
		.item-popup-technician {
			width: 96% !important;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 30rpx;
			overflow: hidden;
			padding: 0;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.swiper-item-img {
				width: 100%;
				height: 600rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		//
		.qualification-list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			// padding-bottom: 20rpx;
			background-color: #FEF5E0;
			.qualification-item {
				image {
					width: 24rpx;
					height: 22rpx;
					margin-right: 11rpx;
				}

				display: flex;
				align-items: center;
				font-size: 22rpx;
				font-family: PingFangSC,
				PingFang SC;
				font-weight: 400;
				color: #6E4E37;
				height: 70rpx;
				line-height: 70rpx;
			}

		}
		//
		.technician-popup-info {
			padding: 30rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			margin-top: -10rpx;
			background-color: #fff;
			height: 433rpx;
			.technician-info-lines {
				display: flex;
				align-items: center;
				padding: 12rpx 0;
				.name {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #07080A;
				}

				.age {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #07080A;
					margin-left: 20rpx;
				}

				.right-address {
					display: flex;
					align-items: center;
					margin-left: auto;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #757575;

					image {
						width: 17rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.technician-datum-list-content {
			background-color: #F5F6F7;
			padding: 20rpx 30rpx;
			border-radius: 10rpx;
			height: 238rpx;
			box-sizing: border-box;
		}
		.technician-datum-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 16rpx;
			.item-datum {
				display: flex;
				align-items: center;
				flex-basis: 33.3333%;
				margin-bottom: 10rpx;
				.titles {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888889;
					margin-right: 8rpx;
				}

				.desc {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #0F0807;
					max-width: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.brief-introduction {
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #0F0807;
			margin-top: 20rpx;
			background-color: #F5F6F7;
			display: -webkit-box;
			-webkit-line-clamp: 2; /* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		//
		.bottom-lines {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #8B8C8D;
			margin-top: 20rpx;
			justify-content: space-between;
			.btns {
				margin-left: auto;
				display: flex;
				align-items: center;
				image{
					flex: 1;
				}
				
			}
			view{
				display: flex;
				align-items: center;
			}

			image {
				width: 140rpx;
				// height: 59rpx;
				// margin-left: 14rpx;
			}
		}
	}

	//
	.hint-popup {
		width: 258rpx;
		height: 271rpx;
		background: rgba(0, 0, 0, 0.8);
		border-radius: 10rpx;
		position: fixed;
		top: var(--status-bar-height);
		right: 30rpx;
		z-index: 110;
		margin-top: 82rpx;

		.top-fixed {
			position: absolute;
			top: -16rpx;
			right: 0;
			width: 0;
			height: 0;
			border-bottom: 22rpx solid rgba(0, 0, 0, 0.8);
			border-right: 22rpx solid transparent;
			border-left: 22rpx solid transparent;
		}

		.menu-list {
			padding: 0 34rpx;
		}

		.item-menu {
			display: flex;
			align-items: center;
			height: 83rpx;
			line-height: 83rpx;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #DFE0E0;
			border-bottom: 1rpx solid #676767;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 30rpx;
			}
		}

	}
	.u-parse-content{
		width:100%;
		// height: 100vh;
		padding:0 30rpx;
		padding-bottom: 130rpx;
		view{
			width:100%;
			height: 100%;
		}
	}
	/deep/ .rich-img {
		max-width: 100% !important;
		height: auto !important;
	}
	//
	.top-bg-content{
		background: url('https://qiniu-cdn.maeiyun.com/imgs/index/p1.png')no-repeat;
		background-size: 100% 100%;
		height: 105rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 64rpx;
		line-height: 105rpx;
		font-size: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #9F4723;
		position: relative;
		image{
			width:24rpx;
			height: 24rpx;
			position: absolute;
			right: 25rpx;
			top:40rpx;
		}
	}
	.inner-popup-content{
		padding: 37rpx 62rpx;
		padding-bottom: 100rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		color: #363737;
		line-height: 37rpx;
		max-height: 50vh;
		box-sizing: border-box;
	}
</style>